<template>
  <view>
    <!--  <view class="flex" style="padding: 102rpx 81rpx 25rpx 81rpx;text-align: center;">
      <view class="year">年</view>
      <view class="year" style="margin: 0 14rpx;">月</view>
      <view class="year" style="margin-right: 186rpx;">日</view>
      <view class="year">年</view>
      <view class="year" style="margin: 0 14rpx;">月</view>
      <view class="year">日</view>
    </view> -->
    <!-- <view class="mainColor flex justify-between" style="height: 47rpx;padding: 0 106rpx;">
      <picker mode="date" :value="date" :end="yesterday" @change="yesterdayChange">
        <view class="uni-input">{{yesterday}}</view>
      </picker>
      <view class="">-</view>
      <picker mode="date" :value="date" :end="date" @change="dateChange">
        <view class="uni-input">{{date}}</view>
      </picker>
    </view> -->
    <view class="" style="padding: 58rpx 23rpx 0 25rpx;">
      <view class="mainColor font-13 revenCard" style="padding: 20rpx;">
        <view class="font-card" style="margin-bottom: 8rpx;">总充电金额：
          <text class="color0">{{ generalSituation.totalChargingAmount }}</text>
          <text style="font-size: 14px;margin-left: 6rpx;">元</text>
        </view>
        <view class="font-card margin-b10">总充电电量：
          <text class="color0">{{ generalSituation.totalChargingDegree }}</text>
          <text style="font-size: 14px;margin-left: 6rpx;">度</text>
        </view>
        <view class="flex justify-between font-13">
          <view>
            <view class="number">
              {{ generalSituation.totalChargingQuantity }}
            </view>
            <view>总充电订单数(笔)</view>
          </view>
          <view>
            <view class="number">
              {{ generalSituation.totalPileQuantity }}
            </view>
            <view>总充电设备数量（座）</view>
          </view>
        </view>
        <view class="font-13" v-if="checkRole(['admin','common'])" style="margin-top: 20rpx;">
          <view class="number">{{ generalSituation.totalMemberAmount }}
          </view>
          <view style="text-align: center;">总客户余额（元）</view>
        </view>
        <!-- <view class="font-13">
          <text style="margin-right: 145rpx;">总服务费金额</text>
          <text>￥ 0.00</text>
        </view> -->
      </view>
      <view class="mainColor font-13 revenCard">
        <view style="padding-top: 44rpx;margin-left: 61rpx;">
          <text class="font-card">收入指数</text>
          <text>（元）、</text>
          <text class="font-card">用电量</text>
          <text>（度）</text>
        </view>
        <view class="charts-box">
          <qiun-data-charts type="column" :opts="opts" :chartData="chartData" :ontouch="true" background="#040f25" />
        </view>
      </view>
      <!-- <view class="mainColor font-13 revenCard">
        <view style="padding-top: 44rpx;margin-left: 61rpx;">
          <text class="font-card">支付额</text>
          <text>（元）、</text>
          <text class="font-card">订单数</text>
          <text>（单）</text>
        </view>
        <view class="charts-orderBox">
          <qiun-data-charts type="mix" :opts="optsOrder" :chartData="chartDataOrder" :ontouch="true"
            background="#fff" />
        </view>
      </view> -->
    </view>
  </view>
</template>

<script>
  import getDateTime from '@/common/time.js'
  import {
    getGeneralSituation,
    getOrderInfo
  } from "@/api/index";
  import {
    checkPermi,
    checkRole
  } from "@/utils/permission";
  export default {
    data() {
      return {
        yesterday: '',
        date: '',
        chartData: {},
        opts: {
          color: ["#1890FF", "#91CB74", "#FAC858", "#EE6666", "#73C0DE", "#3CA272", "#FC8452", "#9A60B4", "#ea7ccc"],
          padding: [15, 15, 0, 5],
          enableScroll: true, // 开启滚动条
          legend: {},
          dataLabel: false, // 不显示series.data中的数据
          xAxis: {
            disableGrid: true,
            scrollShow: true,
            itemCount: 4,
            rotateLabel: true // x轴文字倾斜
          },
          yAxis: {
            showTitle: true,
            data: [{
                position: 'left',
                title: '电费：¥',
                fontSize: 10,
                min: 0,
                titleOffsetX: 15,
                titleOffsetY: 5,
                fontColor: '#fff',
                tofix: 0,
              },
              {
                position: 'right',
                title: '电量：kwh',
                fontSize: 10,
                min: 0,
                titleOffsetX: 15,
                titleOffsetY: 5,
                fontColor: '#fff',
                tofix: 0,
              }
            ]
          },
          extra: {
            column: {
              type: "meter",
              // type: "group",
              width: 30,
              activeBgColor: "#fff",
              activeBgOpacity: 0.08,
              labelPosition: "center",
              meterBorder: 3,
              meterFillColor: "#EBFBD6"
            }
          }
        },
        generalSituation: {},
        orderInfo: [],
        chartDataOrder: {},
        optsOrder: {
          color: ["#1890FF", "#91CB74", "#FAC858", "#EE6666", "#73C0DE", "#3CA272", "#FC8452", "#9A60B4", "#ea7ccc"],
          padding: [15, 15, 0, 15],
          dataLabel: false, // 不显示series.data中的数据
          enableScroll: false,
          legend: {},
          xAxis: {
            disableGrid: true,
            title: "单位：年"
          },
          yAxis: {
            disabled: false,
            disableGrid: false,
            splitNumber: 5,
            gridType: "dash",
            dashLength: 4,
            gridColor: "#CCCCCC",
            padding: 10,
            showTitle: true,
            data: [{
                position: "left",
                title: "折线"
              },
              {
                position: "right",
                min: 0,
                max: 200,
                title: "柱状图",
                textAlign: "left"
              }
            ]
          },
          extra: {
            column: {
              type: "meter",
              // type: "group",
              width: 30,
              activeBgColor: "#fff",
              activeBgOpacity: 0.08,
              labelPosition: "center",
              meterBorder: 3,
              meterFillColor: "#EBFBD6"
            }
          }
        }
      };
    },
    onReady() {
      this.getServerData();
      this.getOrderServerData()
    },
    methods: {
      checkPermi,
      checkRole,
      async getGeneral() {
        const {
          obj
        } = await getGeneralSituation({});
        console.log("首页信息 getGeneral", obj);
        this.generalSituation = obj;
      },
      async getOrder() { // 折线图信息
        const {
          obj
        } = await getOrderInfo({});
        this.orderInfo = obj;

      },
      yesterdayChange(e) {
        this.yesterday = e.detail.value
      },
      dateChange(e) {
        this.date = e.detail.value
      },
      async getServerData() {
        await this.getOrder();
        setTimeout(() => {
          console.log("订单信息 getOrderInfo", this.orderInfo);
          let res = {
            categories: this.orderInfo.map(item => {
              return item.date.replace(' ', '\n')
            }),
            series: [{
                name: "总用电量",
                type: "line",
                index: 1,
                data: this.orderInfo.map((item) => {
                  return +item.totalElectricity;
                }),
                color: "rgba(252,120,48,0)",
              },
              {
                name: "总订单金额",
                type: "line",
                index: 0,
                data: this.orderInfo.map((item) => {
                  return +item.totalOrderAmount;
                }),
              },
              {
                name: "尖时段总用电量",
                data: this.orderInfo.map((item) => +item.totalSharpUsedElectricity),
                color: "#ff4949"
              },
              {
                name: "峰时段总用电量",
                data: this.orderInfo.map((item) => {
                  return +item.totalPeakUsedElectricity;
                }),
                color: "#ffba00"
              },
              {
                name: "平时段总用电量",
                data: this.orderInfo.map((item) => {
                  return +item.totalFlatUsedElectricity;
                }),
                color: "#12ce65"
              },
              {
                name: "谷时段总用电量",
                data: this.orderInfo.map((item) => {
                  return +item.totalValleyUsedElectricity;
                }),
                color: "#909399"
              }
            ]
          };
          console.log(res, 'res');
          this.chartData = JSON.parse(JSON.stringify(res));
        }, 500)
      },
      getOrderServerData() {
        //模拟从服务器获取数据时的延时
        setTimeout(() => {
          //模拟服务器返回数据，如果数据格式和标准格式不同，需自行按下面的格式拼接
          let res = {
            categories: ["2018", "2019", "2020", "2021", "2022", "2023"],
            series: [{
                name: "柱1",
                index: 1,
                type: "column",
                data: [40, {
                  "value": 30,
                  "color": "#f04864"
                }, 55, 110, 24, 58]
              },
              {
                name: "柱2",
                index: 1,
                type: "column",
                data: [50, 20, 75, 60, 34, 38]
              },
              {
                name: "曲线",
                type: "line",
                style: "curve",
                color: "#1890ff",
                disableLegend: true,
                data: [70, 50, 85, 130, 64, 88]
              },
              {
                name: "折线 尖时段总用电量",
                type: "line",
                color: "#2fc25b",
                data: [120, 140, 105, 170, 95, 160]
              }
            ]
          };
          this.chartDataOrder = JSON.parse(JSON.stringify(res));
        }, 500);
      },
    },
    created() {
      this.yesterday = getDateTime.getDateStr(null, -1) // 昨天
      this.date = getDateTime.dateTimeStr('y-m-d') // 今天
      // console.log(this.yesterday, this.date);
      this.getGeneral();
    }
  };
</script>

<style lang="scss" scoped>
  .number {
    text-align: center;
    color: #1890FF;
    font-size: 20px;
  }

  .charts-box {
    width: 100%;
    height: 390px;
    margin-top: 12rpx;
  }

  .charts-orderBox {
    width: 100%;
    height: 200px;
  }

  .year {
    width: 58rpx;
    border-radius: 9rpx;
    background-color: #040f25;
  }

  .revenCard {
    // height: 605rpx;
    margin-bottom: 39rpx;
    border-radius: 28rpx;
  }
</style>